import React from 'react'
import styled from 'styled-components'

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "password",
  // or we can define dynamic ones
  size: props.size || "1em",
}))`
  color: palevioletred;
  font-size: 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  /* here we use the dynamically computed prop */
  /* 这里能获取到上面我们设置的type和size */
  margin: ${props => {
  console.log('props:', props);
  /*
props: {placeholder: "A small text input", theme: {…}, type: "password", size: "1em"}
  placeholder: "A small text input"
  theme: {}
  type: "password"
  size: "1em"
  __proto__: Object
  */
  return props.size;
}};
  padding: ${props => props.size};
`;

export default ()=>(
  <>
    <Input placeholder="A small text input" />
    <br />
    <Input placeholder="A bigger text input" size="2em" />
  </>
)
